axios.defaults.baseURL = '/device/'
    //将axios挂载在Vue原型上 在别的组件中 this.$http  112.124.17.92:9527
Vue.prototype.$http = axios
    //将echarts挂载在Vue原型上 在别的组件中 this.$echarts
Vue.prototype.$echarts = window.echarts
Vue.config.productionTip = false


var app = new Vue({
    el: '#app',
    data() {
        return {
            chartInstance: null,
            allData: null,
            onLine: null,
            line: null,
            warns: null,
            onLineValue: null,
            lineValue: null,
            warnsValue: null,
            //zhuzhuant
            zChart: null,
            allchar: null,
            zChartName: null,
            zChartValue: null

        }
    },
    mounted() {
        this.initChart()
        this.getData()
        this.getzData()
    },
    methods: {
        // 初始化
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.pie_chart)
            this.zChart = this.$echarts.init(this.$refs.zChart)
        },
        //获取数据
        async getData() {
            var abj;
            const {
                data: ret
            } = await this.$http.get('findDevicesStatusAndAmount')

            obj = ret.selectResult
            this.allData = obj


            // this.onLine=
            this.updateChart()



        },
        //获取柱状图数据
        async getzData() {
            var abj;
            const {
                data: ret
            } = await this.$http.get('findAreaDevicesAmountAndFaultDeviceAmount')
            console.log(ret);
            obj = ret.selectResult

            this.allchar = obj

            this.updatezChart()
        },
        //更新列表
        updateChart() {
            const sellerNames = this.allData.map((item) => {
                return item.name
            })
            const sellerValues = this.allData.map((item) => {
                return item.value
            })

            this.onLine = sellerNames[0]
            this.line = sellerNames[1]
            this.warns = sellerNames[2]
            this.onLineValue = sellerValues[0]
            this.lineValue = sellerValues[1]
            this.warnsValue = sellerValues[2]
            const option = {
                color: ["#4f8bf9", "#fea31e", "#959595"],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '60%'],
                    center: ["50%", "42%"],
                    label: {
                        normal: {
                            position: 'outside',
                            formatter: "{b}:{d}%"
                        }
                    },
                    data: this.allData
                }]
            };
            this.chartInstance.setOption(option)

        },
        updatezChart() {
            const zChartName = this.allchar.map((item) => {
                return item.areaName
            })
            const zChartValue = this.allchar.map((item) => {
                return item.proportion
            })
            var baifenbi = zChartValue;
            console.log(zChartValue);
            console.log(baifenbi);
            var grayBar = [1, 1, 1, 1, 1];
            var paiming = [5, 4, 3, 2, 1];
            var xingm = zChartName
            const option = {
                title: {
                    text: '2022年 第一季度',
                    left: '75%',
                    top: "20",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                },
                grid: {
                    left: '15%', //如果离左边太远就用这个......
                    right: '15%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: [{
                        show: false,
                    },
                    {
                        show: false,
                    }
                ],
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true, //让Y轴数据不显示
                    },

                    axisTick: {
                        show: false, //隐藏Y轴刻度
                    },
                    axisLine: {
                        show: false, //隐藏Y轴线段
                    },
                },
                series: [
                    //背景色
                    {
                        show: true,
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: '10%', //统计条宽度
                        itemStyle: {
                            normal: {
                                barBorderRadius: 50,
                                color: 'rgba(41, 55, 94)'
                            },
                        },
                        z: 1,
                        data: grayBar,
                    },
                    //蓝条
                    {
                        show: true,
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: '10%', //统计条宽度
                        itemStyle: {
                            normal: {
                                barBorderRadius: 50, //统计条弧度
                                color: {
                                    colorStops: [{
                                        offset: 0,
                                        color: '#5d29f7' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#5093fb' // 100% 处的颜色
                                    }],
                                    globalCoord: false, // 缺省为 false

                                }
                            },
                        },
                        max: 1,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff', //百分比颜色
                                },
                                position: [0, '-35'],
                                rich: { //富文本
                                    yellow: {
                                        color: '#FEC735',
                                    }
                                },
                                formatter: function(data) {
                                    //富文本固定格式{colorName|这里填你想要写的内容}
                                    if (paiming[data.dataIndex] == 1 || paiming[data.dataIndex] == 2 || paiming[data.dataIndex] == 3) {
                                        return '{yellow|' + paiming[data.dataIndex] + '  ' + xingm[data.dataIndex] + '}';
                                    } else {
                                        return paiming[data.dataIndex] + '  ' + xingm[data.dataIndex]
                                    }

                                },

                            }
                        },
                        data: baifenbi,
                    },

                ]
            };
            this.zChart.setOption(option)
        },
    },
})